<template>
<div :class="box" >
    <div class="top">
        <div><slot name="jieshao"></slot></div>
        <div><slot name="num"></slot></div>
    </div>
    <div class="bot">
        <div>
            <div><slot name="yue"></slot></div>
            <div><slot name="yuenum"></slot></div>
        </div>
        <div>
            <div><slot name="all"></slot></div>
            <div><slot name="allnum"></slot></div>
        </div>
    </div>

    
</div>
</template>

<script setup>
import { ref ,reactive } from 'vue';
 const box='box'

</script>

<style scoped>
.top div :nth-child(1){
    font-size: 20px;
}
.top div :nth-child(2){
    font-size: 30px;
    font-weight: bolder;
}
.top{
    text-align: center;
}
.bot{
    display: flex;
    justify-content: space-around;
}


</style>